<template>
    <div class="box">
        <div>
            <div v-if="img_url"
            :style="`background-image: url(${article.cover_image})`"
            class="bg-img">
            </div>
            <img v-else class="bg-img" src="../assets/icons/favsion.png" alt="封面"/>
        </div>
        <div class="detils-box">
            <div>
                <h5>{{article.title}}</h5>
                <p class="article-body" >{{article.body}}</p>
            </div>
            <div class="bottom-box">
                <img class="img-icon" src="../assets/icons/eye.svg" alt=""><span>{{article.views}}</span>
                <img class="img-icon" src="../assets/icons/question.svg" alt=""><span>{{article.comments_counts}}</span>
                <p>{{ $t('articleItem.tags') }}{{article.tags}}</p>
                <p>{{ $t('articleItem.author') }}{{article.username}}</p>
                <p>{{ $t('articleItem.creatTime') }}{{article.create_time}}</p>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref, defineProps,onMounted } from "vue"
const props= defineProps(["article"])
const img_url = ref(true) 

onMounted(() => {
    if( props.article.cover_image.length<8){
        img_url.value =false
    }

})
</script>
<style lang="scss" scoped>

@media screen and (max-width: $passlink-media-max-width-5) {
    
    .bg-img{
        display: none;
    }
    .article-body{
        display: none;
    }
    
  }

.box {
    width: auto;
    height: auto;
    display: flex;
    background: $passlink-font-color-black;
    border-bottom: 2px solid $passlink-font-color-white;
    padding-top: 5px;
    align-items: center;

    .bg-img {
        width: 60px;
        height: 60px;
        transition: all .5s;
        height:60px;background-size: cover;   border-radius: 5px;
    }

    .bg-img:hover {
        
        box-shadow: 0 0 15px $passlink-font-color-white;
    }

    .bg-img:hover::before {
        transition: all .5s;
    }

    .detils-box {
        margin-left: 10px;
        width: 100%;
        color: $passlink-font-color-white;
        font-size: $passlink-font-size12;

        .article-body{
            width: 50%;
            text-indent:2ch;
            word-wrap:normal;
            color: $passlink-font-color-white;
        }

        h5 {
            color: $passlink-font-color-yellow;
        }

        .bottom-box {
            display: flex;
            width: 100%;

            span {
                font-weight: lighter;
                width: 40px;
            }

            p {
                margin-left: 20px;
                font-weight: lighter;  
                width: 200px;
                text-align: left;
            }

            .img-icon {

                margin-left: 10px;
                width: 16px;
                height: 16px;
                box-shadow: none;
            }
        }

    }
}

</style>
